<template>
    <div class="container-announ-auth">
        <a-modal width="1300px" :visible="visible" title="信息详情" @cancel="closeModal" class="yuan-modal announ-auth"
            :dialog-style="{ top: '20px' }">
            <a-spin tip="Loading..." :spinning="loading">
                <div class="yuan-form">
                    <a-form-model layout="inline" class="yuan-form" ref="form" :model="formData" :rules="rules"
                        :label-col="{ style: { width: '120px' } }" :wrapper-col="{ style: { width: 'calc(100% - 120px)' } }">
                        <div class="form-panel">
                            <div class="form-title">公示审核</div>
                            <div class="form-panel-box yuan-form-col3">
                                <a-form-model-item class="yuan-form-item" label="科技成果名称" prop="">
                                    <span class="yuan-form-input">{{detailInfo.achievementName}}</span>
                                </a-form-model-item>
                                <a-form-model-item class="yuan-form-item" label="科技成果种类" prop="">
                                    <span class="yuan-form-input">{{detailInfo.achievementCategory}}</span>
                                </a-form-model-item>
                                <a-form-model-item class="yuan-form-item" label="转化方式" prop="">
                                    <span class="yuan-form-input">{{detailInfo.conversionWay}}</span>
                                </a-form-model-item>
                            </div>
                        </div>
                        <div class="form-panel">
                            <div class="form-title">科技人员取得职务科技成果转化现金奖励信息</div>
                            <div class="form-panel-box yuan-form-col3">
                                <a-form-model-item class="yuan-form-item" label="取得转化收入金额" prop="">
                                    <span class="yuan-form-input">{{detailInfo.gainConversionMoney}}</span>
                                    <span> 万元</span>
                                </a-form-model-item>
                                <a-form-model-item class="yuan-form-item" label="取得转化收入时间" prop="conversionIncomeTime"
                                    :label-col="{ style: { width: '170px' } }"
                                    :wrapper-col="{ style: { width: 'calc(100% - 170px)' } }">
                                    <a-date-picker class="yuan-form-input" placeholder="取得转化收入时间"
                                        v-model="formData.conversionIncomeTime" inputReadOnly valueFormat="YYYY-MM-DD" />
                                </a-form-model-item>
                                <div class="scale-box" :class="scaleType1&&'scale-box-show'">
                                    <div class="small-title">科技成果现金奖励人员信息</div>
                                    <template v-for="item in detailInfo.awardList">
                                        <div class="user-panel" v-if="item.type==='KJRY'">

                                            <div class="user-info">
                                                <span class="user-title">姓名：</span>
                                                <span class="user-word">{{item.name}}</span>
                                            </div>
                                            <div class="user-info">
                                                <span class="user-title">性别：</span>
                                                <span class="user-word">{{item.gender}}</span>
                                            </div>
                                            <div class="user-info">
                                                <span class="user-title">学院（校内）/单位（校外）：</span>
                                                <span class="user-word">{{item.schoolWithinOuter}}</span>
                                            </div>
                                            <div class="user-info">
                                                <span class="user-title">职务：</span>
                                                <span class="user-word">{{item.post}}</span>
                                            </div>
                                            <div class="clear-both"></div>
                                            <div class="user-info">
                                                <span class="user-title">身份证号：</span>
                                                <span class="user-word">{{item.identityCard}}</span>
                                            </div>
                                            <div class="user-info">
                                                <span class="user-title">贡献比例：</span>
                                                <span class="user-word">{{item.contributionRatio}}</span>
                                            </div>

                                        </div>
                                    </template>
                                    <div class="small-title">科技成果现金奖励信息</div>
                                    <a-form-model-item class="yuan-form-item" label="科技成果现金奖励总额" prop=""
                                        :label-col="{ style: { width: '170px' } }"
                                        :wrapper-col="{ style: { width: 'calc(100% - 170px)' } }">
                                        <span class="yuan-form-input">{{detailInfo.achievementAwardRental}}</span>
                                        <span> 万元</span>
                                    </a-form-model-item>
                                    <a-form-model-item class="yuan-form-item" label="现金奖励发放时间" prop="cashBonusTime"
                                        :label-col="{ style: { width: '170px' } }"
                                        :wrapper-col="{ style: { width: 'calc(100% - 170px)' } }">
                                        <a-date-picker class="yuan-form-input" placeholder="现金奖励发放时间"
                                            v-model="formData.cashBonusTime" inputReadOnly valueFormat="YYYY-MM-DD" />
                                    </a-form-model-item>

                                    <div class="small-title">科技成果转化技术合同登记信息</div>
                                    <a-form-model-item class="yuan-form-item" label="技术合同在技术合同登记机构的登记情况"
                                        :label-col="{ style: { width: '280px' } }"
                                        :wrapper-col="{ style: { width: 'calc(100% - 280px)' } }" style="width:90%"
                                        prop="contractRegisterInfo">
                                        <a-input type="textarea" style="width: 500px;background-color:#F7F7F7" :rows="5"
                                            v-model="formData.contractRegisterInfo" placeholder="请输入科技成果转化技术合同登记信息"
                                            :maxLength="200" />
                                    </a-form-model-item>

                                    <a-form-model-item class="yuan-form-item yuan-form-col5" label="公示时间" prop="staffPublicity">
                                        <a-range-picker class="yuan-form-input" :placeholder="['开始日期','结束日期']"
                                            :format="['YYYY-MM-DD','YYYY-MM-DD']" v-model="formData.staffPublicity" />
                                        <span class="c-danger" v-if="formData.staffPublicity">
                                            公示期：{{getDayNum('staffPublicity')}}天</span>
                                    </a-form-model-item>

                                </div>
                                <div class="scale-action c-primary" @click="scaleType1=false" v-if="scaleType1===true">
                                    <span>隐藏详情</span>
                                    <span class="iconfont">&#xe76e;</span>
                                </div>
                                <div class="scale-action c-primary" @click="scaleType1=true" v-else>
                                    <span>展开详情</span>
                                    <span class="iconfont">&#xe613;</span>
                                </div>

                            </div>

                        </div>

                        <div class="form-panel">
                            <div class="form-title">科技成果转化重要贡献人奖励公示信息</div>
                            <div class="form-panel-box yuan-form-col3">
                                <a-form-model-item class="yuan-form-item" label="转化收入" prop="">
                                    <span class="yuan-form-input">{{detailInfo.conversionIncome}} 万元</span>
                                </a-form-model-item>
                                <a-form-model-item class="yuan-form-item" label="取得收入时间" prop="gainIncomeTime">
                                    <a-date-picker class="yuan-form-input" placeholder="取得收入时间" v-model="formData.gainIncomeTime"
                                        inputReadOnly valueFormat="YYYY-MM-DD" />
                                </a-form-model-item>
                                <div class="scale-box" :class="scaleType2&&'scale-box-show'">
                                    <div class="small-title">成果转化重要贡献人信息</div>
                                    <template v-for="item in detailInfo.awardList">
                                        <div class="user-panel" v-if="item.type==='KJCG'">
                                            <div class="user-info">
                                                <span class="user-title">姓名：</span>
                                                <span class="user-word">{{item.name}}</span>
                                            </div>
                                            <div class="user-info">
                                                <span class="user-title">性别：</span>
                                                <span class="user-word">{{item.gender}}</span>
                                            </div>
                                            <div class="user-info">
                                                <span class="user-title">岗位职务：</span>
                                                <span class="user-word">{{item.post}}</span>
                                            </div>
                                            <div class="user-info">
                                                <span class="user-title">身份证号：</span>
                                                <span class="user-word">{{item.identityCard}}</span>
                                            </div>
                                            <div class="clear-both"></div>

                                            <div class="user-info">
                                                <span class="user-title">贡献率：</span>
                                                <span class="user-word">{{item.rateOfContribution}}</span>
                                            </div>
                                            <div class="user-info">
                                                <span class="user-title">奖励金额：</span>
                                                <span class="user-word">{{item.awardMoney}}</span>
                                            </div>
                                        </div>
                                    </template>

                                    <div class="small-title">成果转化重要贡献奖励信息</div>
                                    <a-form-model-item class="yuan-form-item" label="奖励总额" prop="">
                                        <span class="yuan-form-input">{{detailInfo.achievementTransitionMoney}} 万元</span>
                                    </a-form-model-item>
                                    <a-form-model-item class="yuan-form-row" label="拟发放时间" prop="grantTime">
                                        <a-date-picker class="yuan-form-input" placeholder="拟发放时间" v-model="formData.grantTime"
                                            inputReadOnly valueFormat="YYYY-MM-DD" :disabled="formData.ifPublicityPeriod===1" />

                                        <a-checkbox-group style="margin-left:10px" v-model="formData.ifPublicityPeriodArr"
                                            @change="ifPublicityPeriodChange">
                                            <a-checkbox :value="1">公示期结束后</a-checkbox>
                                        </a-checkbox-group>

                                    </a-form-model-item>

                                    <a-form-model-item class="yuan-form-item yuan-form-col5" label="公示时间"
                                        prop="achievementPublicity">
                                        <a-range-picker class="yuan-form-input" :placeholder="['开始日期','结束日期']"
                                            :format="['YYYY-MM-DD','YYYY-MM-DD']" v-model="formData.achievementPublicity" />
                                        <span class="c-danger" v-if="formData.achievementPublicity">
                                            公示期：{{getDayNum('achievementPublicity')}}天</span>
                                    </a-form-model-item>
                                </div>
                                <div class="scale-action c-primary" @click="scaleType2=false" v-if="scaleType2===true">
                                    <span>隐藏详情</span>
                                    <span class="iconfont">&#xe76e;</span>
                                </div>
                                <div class="scale-action c-primary" @click="scaleType2=true" v-else>
                                    <span>展开详情</span>
                                    <span class="iconfont">&#xe613;</span>
                                </div>
                            </div>

                        </div>

                        <div class="form-panel">
                            <div class="form-title">技术转让信息公示</div>
                            <div class="form-panel-box">
                                <div class="small-row-box">
                                    <div class="small-row-title">（一）技术信息</div>
                                </div>

                                <div class="clear-both"></div>

                                <a-form-model-item class="yuan-form-item" label="成果名称" prop="">
                                    <span class="yuan-form-input">{{detailInfo.achievementName}}</span>
                                </a-form-model-item>
                                <div class="clear-both"></div>
                                <a-form-model-item class="yuan-form-item" label="成果类型" prop="">
                                    <span class="yuan-form-input">{{detailInfo.achievementCategory}}</span>
                                </a-form-model-item>
                                <div class="clear-both"></div>
                                <a-form-model-item class="yuan-form-item yuan-form-col3" label="成果识别号"
                                    prop="achievementIdentifyNumber">
                                    <a-input class="yuan-form-input" v-model="formData.achievementIdentifyNumber"
                                        placeholder="请输入"></a-input>
                                </a-form-model-item>
                                <a-form-model-item class="yuan-form-item yuan-form-col3" label="拟交易价格" prop="bargainPrice">
                                    <a-input class="yuan-form-input" v-model="formData.bargainPrice" placeholder="请输入"></a-input>
                                </a-form-model-item>
                                <a-form-model-item class="yuan-form-item yuan-form-col3" label="大写金额" prop="amountInWords">
                                    <a-input class="yuan-form-input" v-model="formData.amountInWords" placeholder="请输入"></a-input>
                                </a-form-model-item>
                                <div class="scale-box" :class="scaleType3&&'scale-box-show'">
                                    <div class="small-row-box">
                                        <div class="small-row-title">（二）</div>
                                        <a-form-model-item class="yuan-form-item yuan-form-col3" label="转让方" prop="transferor">
                                            <a-input class="yuan-form-input" v-model="formData.transferor"
                                                placeholder="请输入"></a-input>
                                        </a-form-model-item>

                                    </div>
                                    <div class="small-row-box">
                                        <div class="small-row-title">（三）</div>
                                        <a-form-model-item class="yuan-form-item yuan-form-col3" label="受让方：" prop="transferee">
                                            <a-input class="yuan-form-input" v-model="formData.transferee"
                                                placeholder="请输入"></a-input>
                                        </a-form-model-item>

                                    </div>
                                    <div class="small-row-box">
                                        <div class="small-row-title">（四）</div>
                                        <a-form-model-item class="yuan-form-item yuan-form-col3" label="定价方式："
                                            prop="typeOfPricing">
                                            <a-input class="yuan-form-input" v-model="formData.typeOfPricing"
                                                placeholder="请输入"></a-input>
                                        </a-form-model-item>

                                    </div>
                                    <div class="small-row-box">
                                        <div class="small-row-title">（五）</div>
                                        <a-form-model-item class="yuan-form-item yuan-form-col3" label="重要贡献人："
                                            prop="contributory">
                                            <a-input class="yuan-form-input" v-model="formData.contributory"
                                                placeholder="请输入"></a-input>
                                        </a-form-model-item>

                                    </div>
                                    <div class="small-row-box">
                                        <div class="small-row-title">（六）</div>
                                        <a-form-model-item class="yuan-form-item yuan-form-col3" label="技术经纪人："
                                            prop="transferTechnologyBrokerInfo">

                                            <a-select style="width:200px" class="yuan-form-input" mode="multiple"
                                                v-model="formData.transferTechnologyBrokerArr" placeholder="请选择技术经纪人">
                                                <a-select-option v-for="item in brokerList" :key="item.technicalPhone"
                                                    :value="item.technicalRepresentative+'_'+item.technicalPhone">
                                                    {{item.technicalRepresentative}} {{item.technicalPhone}}
                                                </a-select-option>
                                            </a-select>
                                        </a-form-model-item>

                                    </div>

                                    <a-form-model-item class="yuan-form-item yuan-form-col5" label="公示时间"
                                        prop="transferPublicity">
                                        <a-range-picker class="yuan-form-input" :placeholder="['开始日期','结束日期']"
                                            :format="['YYYY-MM-DD','YYYY-MM-DD']" v-model="formData.transferPublicity" />
                                        <span class="c-danger" v-if="formData.transferPublicity">
                                            公示期：{{getDayNum('transferPublicity')}}天</span>
                                    </a-form-model-item>
                                </div>
                                <div class="scale-action c-primary" @click="scaleType3=false" v-if="scaleType3===true">
                                    <span>隐藏详情</span>
                                    <span class="iconfont">&#xe76e;</span>
                                </div>
                                <div class="scale-action c-primary" @click="scaleType3=true" v-else>
                                    <span>展开详情</span>
                                    <span class="iconfont">&#xe613;</span>
                                </div>
                            </div>
                        </div>
                    </a-form-model>
                </div>
            </a-spin>

            <template slot="footer">
                <a-button @click="pass" type="primary" :loading="loading">
                    通过审核
                </a-button>
                <a-button @click="clickRefuse" type="danger">
                    拒绝审核
                </a-button>
                <a-button @click="closeModal">
                    取消
                </a-button>
            </template>
        </a-modal>
        <a-modal width="600px" title="拒绝原因" :visible="refuseVisible" @ok="refuseOk" @cancel="refuseCancel" okText="确定"
            cancelText="取消">
            <a-spin tip="Loading..." :spinning="refuseLoading">
                <a-form-model layout="inline" class="yuan-form" :label-col="{ style: { width: '100px' } }"
                    :wrapper-col="{ style: { width: 'calc(100% - 120px)' } }">
                    <div class="form-panel">

                        <a-form-model-item label="拒绝原因" prop="number">
                            <a-input v-model="refuseData" type="textarea" style="width: 500px;" :rows="5" placeholder="请输入拒绝原因"
                                :maxLength="500" />
                        </a-form-model-item>
                    </div>
                </a-form-model>
            </a-spin>
        </a-modal>
    </div>
</template>

<script lang="ts">
import api from "@/api/api";
import { Vue, Component, Prop, Watch } from "vue-property-decorator";
@Component({
    name: "dom",
    components: {},
})
export default class index extends Vue {
    @Prop({ default: false }) visible!: boolean;
    @Prop({ default: "" }) detailId!: string;

    @Watch("visible")
    visibleChange() {
        if (this.visible) {
            this.formData = {};
            this.getDetailInfo();
        }
    }
    scaleType1 = true;
    scaleType2 = true;
    scaleType3 = true;
    formData: any = {};
    loading = false;
    validgrantTime(rule, value, callback) {
        console.info(value, this.formData.ifPublicityPeriod);
        if (this.formData.ifPublicityPeriod === 1) {
            callback();
        } else if (value) {
            callback();
        } else {
            callback(new Error("请选择时间!"));
        }
    }
    rules = {
        conversionIncomeTime: [{ required: true, message: "请选择时间", trigger: "change" }],
        cashBonusTime: [{ required: true, message: "请选择时间", trigger: "change" }],
        staffPublicity: [{ required: true, message: "请选择时间", trigger: "change" }],
        contractRegisterInfo: [{ required: true, message: "请输入登记情况", trigger: "change" }],
        gainIncomeTime: [{ required: true, message: "请选择时间", trigger: "change" }],
        grantTime: [{ required: true, message: "请选择时间", trigger: "change", validator: this.validgrantTime }],
        achievementPublicity: [{ required: true, message: "请选择时间", trigger: "change" }],
        transferPublicity: [{ required: true, message: "请选择时间", trigger: "change" }],
        achievementIdentifyNumber: [{ required: true, message: "请输入", trigger: "change" }],
        bargainPrice: [{ required: true, message: "请输入", trigger: "change" }],
        amountInWords: [{ required: true, message: "请输入", trigger: "change" }],
        transferor: [{ required: true, message: "请输入", trigger: "change" }],
        transferee: [{ required: true, message: "请输入", trigger: "change" }],
        typeOfPricing: [{ required: true, message: "请输入", trigger: "change" }],
    };
    async mounted() {}
    closeModal() {
        this.$emit("closeModal");
    }
    async modalOk() {
        this.loading = true;
        try {
            // const res = await warningApi.planAdd(this.sureInfo);
            // this.$message.success(res.msg);
            this.closeModal();
        } finally {
            this.loading = false;
        }
    }

    refuseLoading = false;
    refuseVisible = false;
    clickRefuse() {
        this.refuseVisible = true;
    }
    refuseData = "";
    async refuseOk() {
        this.loading = true;
        try {
            const data = {
                refuseCause: this.refuseData,
                id: this.detailId,
                formulaAuditState: 2,
            };
            const res = await api.postFormulaAudit(data);
            this.$message.success("审核成功");
            this.closeModal();
            this.$emit("resetList");
        } finally {
            this.loading = false;
        }
    }
    refuseCancel() {
        this.refuseVisible = false;
    }
    pass() {
        (this.$refs.form as any).validate(async (valid: boolean) => {
            if (!valid) return;
            this.$confirm({
                title: "确定要通过吗？",
                okText: "确定",
                cancelText: "取消",
                onOk: async () => {
                    this.loading = true;
                    try {
                        const transferTechnologyBrokerInfo:any[] = [];
                        this.formData.transferTechnologyBrokerArr.forEach((sbroker) => {
                            const find = this.brokerList.find((broker) => {
                                return sbroker === broker.technicalRepresentative + "_" + broker.technicalPhone;
                            });
                            if (find) {
                                transferTechnologyBrokerInfo.push(find);
                            }
                        });
                        this.brokerList.forEach((borker) => {});
                        const data = {
                            ...this.formData,
                            id:this.detailId,
                            formulaAuditState: 1,
                            transferTechnologyBrokerInfo,
                            staffPublicityBeginTime: this.formData.staffPublicity[0].format("YYYY-MM-DD"),
                            staffPublicityEndTime: this.formData.staffPublicity[1].format("YYYY-MM-DD"),

                            achievementPublicityBeginTime: this.formData.achievementPublicity[0].format("YYYY-MM-DD"),
                            achievementPublicityEndTime: this.formData.achievementPublicity[1].format("YYYY-MM-DD"),

                            transferPublicityBeginTime: this.formData.transferPublicity[0].format("YYYY-MM-DD"),
                            transferPublicityEndTime: this.formData.transferPublicity[1].format("YYYY-MM-DD"),
                        };
                        const res = await api.postFormulaAudit(data);
                        this.$message.success("审核成功");
                        this.closeModal();
                        this.$emit("resetList");
                    } finally {
                        this.loading = false;
                    }
                },
                onCancel: () => {
                    console.log("Cancel");
                },
            });
        });
    }

    detailInfo: any = {};
    brokerList: any[] = [];
    async getDetailInfo() {
        this.brokerList=[]
        this.loading = true;
        try {
            const res = await api.getAnMentList({ id: this.detailId });
            const brokerObj = {};
            const recordList = res.data.auditData?.recordList || [];
            recordList.forEach((item) => {
                const artisanBrokerInfo = item.artisanBrokerInfo || "";
                if (artisanBrokerInfo) {
                    const artisanBrokerArr = JSON.parse(artisanBrokerInfo);
                    artisanBrokerArr.forEach((broker) => {
                        if (brokerObj[broker.technicalPhone]) {
                            //
                        } else {
                            brokerObj[broker.technicalPhone] = true;
                            this.brokerList.push(broker);
                        }
                    });
                }
            });
            this.detailInfo = { ...res.data.auditData, ...res.data };
        } finally {
            this.loading = false;
        }
    }

    getDayNum(key: string) {
        if (!this.formData[key]) return "";
        const startTime = new Date(this.formData[key][0]).getTime();
        const endTime = new Date(this.formData[key][1]).getTime();
        const day = (endTime - startTime) / (24 * 60 * 60 * 1000);
        return Math.ceil(day);
    }
    ifPublicityPeriodChange() {
        if (this.formData.ifPublicityPeriodArr && this.formData.ifPublicityPeriodArr.length > 0) {
            if (this.formData.grantTime) this.formData.grantTime = "";
            this.formData.ifPublicityPeriod = 1;
            (this.$refs.form as any).clearValidate();
        } else {
            this.formData.ifPublicityPeriod = 0;
        }
    }
}
</script>

<style lang="scss">
.announ-auth {
    .small-title {
        font-weight: bold;
        font-size: 14px;
        color: #333333;
        margin-top: 20px;
    }
    .small-row-box {
        display: flex;
        align-items: center;
    }
    .small-row-title {
        color: #333;
        font-weight: bold;
        font-size: 14px;
    }
    .user-panel {
        background-color: #f7f7f7;
        padding: 15px;
        margin-top: 5px;
    }
    .user-info {
        display: inline-block;
        min-width: 150px;
        line-height: 30px;
        color: #82848a;
        margin-right: 40px;
    }
    .user-word {
        color: #333;
    }
    .scale-box {
        padding-bottom: 0px;
        max-height: 1px;
        overflow: hidden;
        transition: all 0.3s;
    }
    .scale-box-show {
        padding-bottom: 10px;
        max-height: 600px;
    }
    .scale-action {
        border-top: solid 1px #ccc;
        padding-top: 10px;
        text-align: center;
        cursor: pointer;
    }
}
</style>
